import React, { PureComponent } from 'react';
import {
  Row, Col, Card,
} from 'antd';
import styles from './demo.less';
import Calculator from './demo52';

// 1. children 属性: 相当于 vue 中的 slot;
const FancyBorder = props => (
  <div className={styles.fancyBorder}>
    <h4>这是slot的外面部分: {props.title}</h4>
    {props.children}
  </div>
);

// 多个插槽
const SplitPane = props => (
  <Row className={styles.testSplit}>
    <Col span={11} className={styles.testLeft}>
      {props.left}
    </Col>
    <Col span={11} offset={2} className={styles.testRight}>
      {props.right}
    </Col>
  </Row>
);

export default class ComposeComponent extends PureComponent {
  render() {
    return (
      <div>
        <Row>
          <Col span={24}>
            <Card title="组件的组合">
              <h4>测试</h4>
              <FancyBorder title="测试slot">
                <h4>这是 FancyBorder 组件的 slot 部分</h4>
                <p>简单的内容</p>
              </FancyBorder>
            </Card>
            <Card title="测试多个slot" style={{ marginTop: 10 }}>
              <SplitPane
                left={<div>left部分</div>}
                right={<div>right部分</div>}
              />
            </Card>
            <Card title="React的状态提升">
              <Calculator />
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}
